<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<child message='hello!'></child>
</div>
<script>
	/**
	 * 组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。
	 * 它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给
	 * 父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可
	 * 以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
	 * 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 
	 * 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
	 */
	/**
	 * [props description]
	 * @type {Array}
	 * Props
	 * 使用Props传递数据
	 * 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据
	 * 可以使用 props 把数据传给子组件。
	 * prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”：
	 */
	Vue.component('child',{//子组件作用域
		props : ['message'],//子组件的属性
		template : '<span @click="doClick">{{message}}</span>',//无法获取到Vue实例中的doClick
		methods : {
			doClick : function(){
				console.log(this.message);
			}
		}
	});
	var vm = new Vue({//父实例
		el : "#root",
		data : {
			message : '你好啊,lijinwne'
		},
		methods : {
			doClick : function(){
				console.log(this.message);
			}
		}
	})
</script>	
</body>
</html>